<!doctype html>
<html style="font-size:50px;">
<head>
    <meta charset="utf-8">
    <title>每日签到</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no" />
    <link type="text/css" rel="stylesheet" href="../css/checkIn.css" />
   
</head>
<body>
	<header>
		<div class="header-body">
			<div class="record">
						<p>10</p>
						<span>连续签到天数</span>
					</div>
			
			<div class="check-btn">
				<img class="pc" src="../img/check_btn_pc.png">
				<img class="mobile" src="../img/check_btn.png">
				<span>今日签到可得10积分</span>
			</div>
			<div class="record">
						<p>10</p>
						<span>连续签到天数</span>
					</div>
		</div>
		<table>
			<tr>
				<td>
					<div class="record">
						<p>10</p>
						<span>连续签到天数</span>
					</div>
				</td>
				<td>
					<div class="check-btn">
				<img class="pc" src="../img/check_btn_pc.png">
				<span>今日签到可得10积分</span>
			</div>
				</td>
				<td>
						<div class="record">
						<p>10</p>
						<span>连续签到天数</span>
					</div>
				</td>
		</tr>
		</table>
	</header>
	<div class="main">
		<div class="calendar calendar2"></div>
	</div>
	<div class="notes">
		<article>
			每日签到奖励10个积分
		</article>
	</div>

	 <footer>
        返回首页
    </footer>
    <div class="alert hide">
		<div class="alert-body">
			<h6>提示</h6>
				<img src="../img/alert.png" />
			<p>签到成功</p>
			<button>完成</button>
		</div>
	</div>
    <script type="text/javascript" src="../jquery.min.js"></script>
     <script type="text/javascript" src="../jquery.calendar.js"></script>
    <script type="text/javascript">
				$('.calendar2').calendar({
					'onSelect':function(range){
					}
				});
				$('.check-btn img').click(function(){
					if($('.alert').hasClass('hide')){
						$('.alert').removeClass('hide');
					}
				})
				$('.alert button').click(function(){
					if(!$('.alert').hasClass('hide')){
						$('.alert').addClass('hide');
					}
				})
			</script>

</body>